<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="./css/mui.min.css" rel="stylesheet" />
		<!--<link rel="stylesheet" type="text/css" href="./css/mine.css" />-->
		<link rel="stylesheet" type="text/css" href="./css/zhyc_iconfont.css" />
		<style type="text/css">
			.me_info {
				max-height: 190px;
				overflow: hidden;
				width: 100%;
				position: relative;
			}
			
			.me_info.login_before {
				height: 230px;
				max-height: 230px;
			}
			
			.me_info_set_btn {
				position: absolute;
				top: 15px;
				right: 15px;
				color: #fff;
				z-index: 9999 !important;
			}
			
			.me_info .me_bg {
				width: 100%;
			}
			
			.me_info_div {
				width: 100%;
				position: absolute;
				top: 10%;
				text-align: center;
			}
			
			.me_info_div.info_div_login_before {
				top: 5%;
			}
			
			.me_info_div .btn_div {
				width: 100%;
				margin-top: 30px;
			}
			
			.me_info_div .btn_div p {
				font-size: 16px;
			}
			
			.me_info_div .btn_div button {
				width: 100px;
				display: block;
				margin: 0 auto;
				text-align: center;
				color: #fff;
				border: solid 2px #fff;
				border-radius: 5px;
				background: transparent;
				line-height: 0.9 !important;
				font-size: 15px;
			}
			
			.me_info>img {
				width: 100%;
			}
			
			.me_head {
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
			
			.me_info_div h5 {
				color: #fff;
				margin: 15px;
				font-weight: bold;
			}
			
			.me_info_div p {
				color: #fff;
				font-size: 13px;
			}
			
			.mine_head {
				background: #13A96A;
			}
			
			.mine_head h1 {
				color: #fff;
			}
			
			.mine_integral {
				background: #fff;
				overflow: hidden;
				padding: 5px 0 0 0;
			}
			
			.mine_integral h4.mine_integral_left {
				width: 50%;
				float: left;
				font-weight: normal;
				margin-top: 10px;
				font-size: 17px;
				padding-left: 15px;
			}
			
			.mine_integral div.mine_integral_right {
				width: 50%;
				float: left;
				text-align: right;
				padding-right: 15px;
			}
			
			.public_margin_top {
				margin-top: 20px;
			}
			
			.public_margin_top:first-child {
				margin-top: 40px;
			}
			
			.me_list_icon {
				width: 40px;
				height: 40px;
				background: red;
				display: inline-block;
				line-height: 40px;
				color: #fff;
				text-align: center;
				font-size: 25px !important;
				border-radius: 50%;
				margin-right: 13px;
			}
			
			.me_list_icon.geren_bg {
				background: #728BEA;
			}
			
			.me_list_icon.fangke_bg {
				background: #FC8A27;
			}
			
			.me_list_icon.huiyuan_bg {
				background: #FAC636;
			}
			
			.me_list_icon.guanyu_bg {
				background: #D84C29;
			}
			
			.mui-icon-arrowright:before {
				content: '\e583';
				font-size: 16px;
				color: #bbb;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mine_head">
			<h1 class="mui-title">我的</h1>
		</header>
		<div class="mui-content">
			<div class="me_div">
				<div class="me_info" id="mine_logo" style="display: none;">
					<img src="img/d_img.png" />
					<div class="me_info_div">
						<img src="img/logo.jpg" class="me_head" />
						<h5>智慧与创</h5>
					</div>
				</div>
				<div class="me_info login_before" id="login_before">
					<a href="#" class="me_info_set_btn">设置</a>
					<img src="img/d_img.png" />
					<div class="me_info_div info_div_login_before">
						<img src="img/logo.jpg" class="me_head" />
						<div class="btn_div">
							<p>立即登录领取礼包、积分大礼、VIP特权</p>
							<button id="login">立即登录</button>
						</div>
					</div>
				</div>
				<div class="mine_integral">
					<h4 class="mine_integral_left">
		    			我的积分
		    		</h4>
					<div class="mine_integral_right">
						<p>赚积分，换好礼<span class="mui-icon mui-icon-arrowright"></span></p>
					</div>
				</div>
				<div class="me_list public_margin_top">
					<ul class="mui-table-view public_margin_top">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">
								<span class="mui-icon iconfont icon-gerenxinxi me_list_icon geren_bg"></span><span>个人信息</span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">
								<span class="mui-icon iconfont icon-jiaoyin me_list_icon fangke_bg"></span><span>最近访客</span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">
								<span class="mui-icon iconfont icon-huiyuan me_list_icon huiyuan_bg"></span><span>会员中心</span>
							</a>
						</li>
					</ul>

				</div>
				<div class="public_margin_top">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">
								<span class="mui-icon iconfont icon-ziyuan me_list_icon guanyu_bg"></span><span>关于我们</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="./js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var btn_login = document.getElementsByTagName("button");
			btn_login[0].addEventListener("tap", function() {
				var mine_logo = document.getElementById("mine_logo");
				var login_before = document.getElementById("login_before");
				mine_logo.style.display = 'block';
				login_before.style.display = "none";
			})
		</script>
	</body>

</html>